<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
    <script type="text/javascript" src="js/tools.js"></script>
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        .notes {
            margin-top: 10px;
            overflow: hidden;
            padding: 10px;
        }
        .notes li{
            width: 300px;
            float: left;
            background-color: #f5f5f5;
            margin: 5px;
            min-height: 350px;
        }
        .notes li .title {
            text-indent: 0;
            color: red;
        }

        .notes li .spell {
            text-indent: 0;
        }

        .notes li p {
            display: inline-block;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h1>成语解释</h1>
    <input type="text" placeholder="请输入要解释的成语"><button class="btn-define">确定</button><button class="btn-clear">清除记录</button>
    <ul class="notes">
    </ul>
    <script>
        $('.btn-define').addEventListener('click', e => {
            const keyword = $('input').value
            const xhr = new XMLHttpRequest()
            const url =
                'http://route.showapi.com/1196-2?showapi_appid=754868&showapi_sign=fe4fb8b97bc0472cbc4abff2a6aaeaab&keyword=' +
                keyword
            xhr.open('GET', url, true)
            xhr.send()
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let data = xhr.responseText
                    data = JSON.parse(data)
                    const res=data.showapi_res_body.data
                    let html
                    if(data.showapi_res_body.ret_code===202){
                        html=data.showapi_res_body.ret_message7
                    }else if(data.showapi_res_body.ret_code===0){
                        html = `
                        <li>
                            <strong>成语：</strong><p class="title">${res.title}</p><br>
                            <strong>拼音：</strong><p class="spell">${res.spell}</p><br>
                            <strong>注释：</strong><p class="content">${res.content}</p><br>
                            <strong>出自典故：</strong><p class="derivation">${res.derivation}</p><br>
                            <strong>例子：</strong><p class="samples">${res.samples}</p>
                        </li>
                    `
                    }
                    $('.notes').innerHTML+=html
                }
            }
        })
        $('.btn-clear').addEventListener('click',e=>{
            document.querySelectorAll('.notes li').forEach(curr=>curr.remove())
        })
    </script>
</body>

</html>